<template>
	<view class="servelist">
		<!-- 左 -->
		<scroll-view class="serve-left" :style="{height:wh+'px'}">
			<view class="serve-left-box">
				<view class="serve-left-item" :class="{active:twoIndex == index}" v-for="(item,index) in ServeList"
					:key="item.id" @click="serveItems(index,item.id)">{{item.name}}</view>
			</view>
		</scroll-view>

		<!-- 右 -->
		<scroll-view class="serve-right" :style="{height:wh+'px'}">
			<view class="right-title">{{ ServeList[twoIndex].name }}</view>
			<block v-if="ProductList[0]">
				<view class="item-box" v-for="item in ProductList" :key="item.id" @click="ToDetail(item)">
					<view class="box-left">
						<u-image :src="item.image" width="215rpx" height="145rpx" border-radius="20rpx"></u-image>
					</view>
					<view class="box-right">
						<view class="box-title">{{ item.title }}</view>
						<view class="box-desc">已服务{{item.people_number }}次</view>
						<view class="box-price">￥{{ item.price }}</view>
					</view>
				</view>
			</block>
			<Blankpage v-else></Blankpage>
		</scroll-view>
	</view>
</template>

<script>
	import { ResProductTy, ResProductList } from '@/untils/api.js'
	import { Blankpage } from '@/components/Blankpage/Blankpage.vue'
	export default {
		components: {
			Blankpage
		},
		data() {
			return {
				wh: '',
				twoIndex: '',
				ServeList: [],
				ProductList: [],
				Obid: {
					id: ''
				},
				// searis: true
			}
		},
		onShow() {
			// 获取页面可操作高度
			let getWindowInfo = uni.getWindowInfo()
			this.wh = getWindowInfo.windowHeight
		},
		onLoad(option) {
			// this.searis = option.searis
			// this.ServeList = JSON.parse(option.data ? option.data : '')

			let idone = {
				id: option.idone
			}
			let idtwo = {
				id: option.idtwo
			}
			this.ResProductTy(idone)
			this.getProductList(idtwo)
			this.twoIndex = option.index
		},
		methods: {
			ToDetail(item) {
				uni.navigateTo({
					url: `/pages/Home/Detail?id=${item.id}`
				})
				uni.setNavigationBarTitle({
					title: item.title
				})
			},
			serveItems(index, id) {
				this.Obid.id = id
				this.twoIndex = index
				this.getProductList(this.Obid)
			},
			// 请求左侧分类
			async ResProductTy(id) {
				const { data: res } = await ResProductTy(id)
				this.ServeList = res.data.reverse()
			},
			async getProductList(id) {
				const { data: res } = await ResProductList(id)
				this.ProductList = res.data.data
				console.log(res, '服务分类');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.servelist {
		height: 100%;
		display: flex;


		.serve-left {
			width: 215rpx;
			// height: 1200rpx;
			background-color: #f7f7f7;
			text-align: center;

			.serve-left-box {
				.serve-left-item {
					line-height: 90rpx;
				}

				.active {
					color: #01C3A8;
				}
			}
		}

		.serve-right {
			flex: 1;
			padding: 0 45rpx 0 30rpx;

			.right-title {
				color: #898A8F;
				font-size: 22rpx;
			}

			.item-box {
				margin-top: 55rpx;
				display: flex;

				.box-right {
					margin-left: 20rpx;
					width: 100%;

					.box-title {
						font-weight: 700;
						font-size: 24rpx;
					}

					.box-desc {
						color: #9A9A9A;
						font-size: 22rpx;
						margin: 12rpx 0 24rpx;
					}

					.box-price {
						color: #F56803;
						font-size: 28rpx;

					}
				}
			}
		}


	}
</style>
